<template>
  <div class="fangyuan-page">
    <!-- 导航栏部分 -->
    <van-nav-bar title="房源发布" left-arrow @click-left="$router.back()"  fixed/>
    <van-form @submit="onSubmit">
      <span style="color: #21b98f; margin: 30px">房源信息</span>
      <!-- 小区名称 -->
      <van-field
        v-model="areaName"
        name="areaName"
        label="小区名称"
        placeholder="请输入小区名称"
        :rules="[{ required: true, message: '请填写小区名称' }]"
      />
      <!-- 租金 -->
      <div style="display: flex; align-items: center">
        <van-field
          v-model="rentPrice"
          name="rentPrice"
          label="租金"
          placeholder="请输入租金/月"
          :rules="[{ required: true, message: '请填写租金' }]"
        />
        <span style="color: #996; font-size: 12px; width: 10%">￥/月</span>
      </div>
      <!-- 建筑面积 -->
      <div style="display: flex; align-items: center">
        <van-field
          v-model="houseArea"
          name="houseArea"
          label="建筑面积"
          placeholder="请输入建筑面积"
          :rules="[{ required: true, message: '请填写建筑面积' }]"
        />
        <span style="color: #996; font-size: 12px; width: 10%">m²</span>
      </div>

      <!-- 选择器1 -->
      <van-field
        readonly
        clickable
        name="houseStyle"
        :value="houseStyle"
        label="户型"
        placeholder="请选择>"
        :rules="[{ required: true, message: '请选择户型' }]"
        @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <!-- 选择器2 -->
      <van-field
        readonly
        clickable
        name="floors"
        :value="floors"
        label="所在楼层"
        placeholder="请选择>"
        :rules="[{ required: true, message: '请选择楼层' }]"
        @click="showPicker2 = true"
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
      <!-- 选择器3 -->
      <van-field
        readonly
        clickable
        name="origin"
        :value="origin"
        label="朝向"
        placeholder="请选择>"
        :rules="[{ required: true, message: '请填选择朝向' }]"
        style="margin-bottom: 10px"
        @click="showPicker3 = true"
      />
      <van-popup v-model="showPicker3" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns3"
          @confirm="onConfirm3"
          @cancel="showPicker3 = false"
        />
      </van-popup>

      <!-- 房屋标题 -->
      <span style="margin: 10px; font-size: 14px">房屋标题</span>
      <van-field
        style="margin: 10px 0"
        name="title"
        v-model="houseTitle"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        :rules="[{ required: true, message: '请填写房屋标题' }]"
      />

      <!-- 文件上传 -->
      <span style="margin: 10px; font-size: 14px">房屋图像</span>
      <van-field
        name="upLoader"
        :rules="[{ required: true, message: '请上传图片' }]"
        style="margin: 10px 0"
      >
        <template #input>
          <van-uploader v-model="fileList" multiple :after-read="afterRead" />
        </template>
      </van-field>

      <!-- 复选框 -->
      <span style="margin: 10px; font-size: 14px">房屋配置</span>
      <van-field
        name="checkboxGroup"
        :rules="[{ required: true, message: '请选择相关配置' }]"
      >
        <template #input>
          <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
            <!-- layout布局 两行五列-->

            <OneCheck
              v-for="item in peiZhiList"
              :key="item.name"
              :item="item"
            ></OneCheck>
          </van-checkbox-group>
        </template>
      </van-field>

      <!-- 留言部分 -->
      <span style="margin: 10px; font-size: 14px">房屋描述</span>
      <van-field
        style="margin: 10px 0"
        name="describe"
        v-model="describe"
        rows="5"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入房屋描述信息"
        show-word-limit
      />
      <!-- 取消，确认按钮 -->
      <div class="bottom">
        <van-button
          block
          type="info"
          style="width: 50%; color: black; background-color: #fff"
          @click="$router.back()"
          >取消</van-button
        >
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
<!-- {
  "title":this.houseTitle,
  "description":this.describe,
  "houseImg":this.pictures.join('|'),
  "oriented":this.origin,
  "supporting":this.checkboxGroup.join('|'),
  "price":this.rentPrice,
  "roomType":this.houseStyle,
  "size":this.houseArea,
  "floor":this.floors,
  "community":this.areaName
} -->
</template>
<script>
import { toRent,wantRent,postPhoto } from '@/api/torent'
import OneCheck from "@/components/oneCheckbox";
export default {
  name: "fangyuan-page",
  components: {
    OneCheck,
  },
  methods: {
    async onSubmit(values) {
      // console.log( values);
const res= await toRent(
  {
  "title": this.houseTitle,
  "description": this.describe,
  "houseImg": this.upPictures,
  "oriented": this.origin,
  "supporting": this.checkboxGroup.join('|'),
  "price": this.rentPrice,
  "roomType": this.houseStyle,
  "size": this.houseArea,
  "floor": this.floors,
  "community": "AREA|93cbbe43-741d-de54"
}
)
// console.log(res);
if(res.description==="请求成功"){
this.$toast.success(res.description)
}
    },
    onConfirm1(value) {
      this.houseStyle = this.style[value];
      this.showPicker1 = false;
    },
    onConfirm2(value) {
      this.floors = value;
      this.showPicker2 = false;
    },
    onConfirm3(value) {
      this.origin = this.chaoxiang[value];
      this.showPicker3 = false;
    },
   async afterRead(file) {
      // console.log(file);
      const data= new FormData()
      data.append("file",file.file)
      // console.log(data);
      const res= await postPhoto(data)
      // console.log(res);
      // console.log(res.body[0]);

      this.pictures.push(res.body[0])
      console.log(this.pictures.join("|"));
      this.upPictures= this.pictures.join("|")
    },
  },
 async  created(){
const res1=await wantRent()
// console.log(res1);
  },
  data() {
    return {
      areaName: "",
      rentPrice: "",
      houseArea: "",
      houseStyle: "",
      floors: "",
      origin: "",
      houseTitle: "",
      describe: "",
      style:{
        '一居室':'ROOM|20903ae0-c7bc-f2e2',
        '二居室':'ROOM|ce2a5daa-811d-2f49',
        '三居室':'ROOM|d4a692e4-a177-37fd',
        '四居室':'ROOM|d1a00384-5801-d5cd',
      },
      chaoxiang:{
        '东':"ORIEN|141b98bf-1ad0-11e3",
        '西':"ORIEN|dfb1b36b-e0d1-0977",
        '南':"ORIEN|caa6f80b-b764-c2df",
        '西南':"ORIEN|80795f1a-e32f-feb9",
        '北':"ORIEN|103fb3aa-e8b4-de0e",
      },
      checkboxGroup: [],
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      //楼层
      columns2: ["FLOOR|1", "FLOOR|2", "FLOOR|3"],
      //户型
      columns1: ['一居室','二居室','三居室','四居室'],
      //朝向
      columns3: ['东','西' ,'南' , '西南', '北'],
      fileList: [],
      pictures:[],
      upPictures:'',
      peiZhiList: [
        {
          name: "衣柜",
          value: "衣柜",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "洗衣机",
          value: "洗衣机",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "空调",
          value: "空调",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "天然气",
          value: "天然气",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "冰箱",
          value: "冰箱",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "暖气",
          value: "暖气",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "电视",
          value: "电视",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "热水器",
          value: "热水器",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "宽带",
          value: "宽带",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
        {
          name: "沙发",
          value: "沙发",
          activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
          inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
        },
      ],
    };
  },
};
</script>

<style>
.bottom {
  display: flex;
}
.img-icon {
  height: 20px;
}
.function {
  display: flex;
  height: 50px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.function span {
  font-size: 14px;
  color: #333;
  height: 15px;
}
</style>
